<template>
  <div class="container">
    <main-menu-vue class="menu" ref="menu"></main-menu-vue>
    <div class="view">
      <div class="header">
        <span class="header-trigger" @click="collapse">
          <el-icon :size="19" class="icon">
            <component :is="isCollapse ? Expand : Fold" />
          </el-icon>
        </span>
        <span> 冷链 </span>
      </div>
      <el-scrollbar style="background-color: #f2f3f5">
        <router-view />
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
//import { ipcRenderer } from "electron";
import { onMounted, ref } from "vue";
import MainMenuVue from "@/components/MainMenu.vue";
import {
  Expand,
  Fold,
  /* Close,
    FullScreen,
    Minus, */
} from "@element-plus/icons-vue";
// 获取菜单组件实例
const menu = ref();
const isCollapse = ref(false);
console.log(isCollapse.value);
onMounted(() => {
  console.log(menu.value.isCollapse.value);
  isCollapse.value = menu.value.isCollapse.value;
});
// 菜单收缩-扩张
function collapse() {
  menu.value.collapsechange();
  isCollapse.value = menu.value.isCollapse;
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}

.view {
  width: calc(100% - 280px);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.header {
  height: 55px;
  line-height: 55px;
  font-size: 18px;
  background-color: white;
  box-shadow: 0 1px 8px rgb(0 21 41 / 8%);
}

.header-trigger {
  height: 55px;
  padding: 0 18px;
  line-height: 55px;
  vertical-align: top;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: all 0.3s, padding 0s;
  transition: all 0.3s, padding 0s;
}

.header-trigger:hover {
  background-color: #fafafa;
}

.header-trigger:active {
  background-color: #e6e8eb;
}

.icon {
  margin-top: 17px;
}
</style>
